/*******************整个盒子*******************/
:root{
    /*--bg:skyblue;*/
    /*--bg2:aliceblue;*/
    --bgwrap:linear-gradient(to top,aliceblue,skyblue 60%,aliceblue );
    --bgflex:skyblue;
    --bgstudy:skyblue;
}
.wrap{
    background-image: var(--bgwrap);
    width: 90%;
    height: auto;
    position: absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right: auto;
    font-size: 15px;
    display: flex;
    flex-direction: column;
}
@-webkit-keyframes animations{
    0%{-webkit-transform:translate(0);opacity:3;}
    50%{-webkit-transform:translate(25px);opacity:8;}
    70%{-webkit-transform:translate(50px);opacity:3;}
    100%{-webkit-transform:translate(60px);opacity:8;}
    100%{-webkit-transform:translate(60px);opacity:8;}
}
@-moz-keyframes animations{
    0%{-moz-transform:translate(0);opacity:3;}
    50%{-moz-transform:translate(30px);opacity:8;}
    70%{-moz-transform:translate(35px);opacity:3;}
    100%{-moz-transform:translate(60px);opacity:8;}
}
@keyframes animations{
    0%{transform:translate(0);opacity:3;}
    50%{transform:translate(30px);opacity:8;}
    70%{transform:translate(35px);opacity:3;}
    100%{transform:translate(60px);opacity:8;}
}
/*******************个人博客*******************/
.header{
    margin: 0 auto;
    width: 100%;
    height:80px;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
h2{
    position: relative;
    margin: 0;
    font-size: 48px;
    font-weight: 400;
    color: green;
    z-index: 1;
    overflow: hidden;
}
h2 span{
    color: #ff022c;
}
.header h2{
    margin-left: 50px;
}
.header h2:first-letter{
    text-shadow: 5px -5px 1px #999999;
    font-size: 48px;
}
/******************换肤******************/
#mycolor{
    width:auto;
    position: absolute;
    top: -5px;
    left: 10px;
}
#mycolor ul{
    display: flex;
    padding: 0;
    justify-content: space-between;
}
#mycolor ul>li{
    margin: 5px;
    border-radius: 50%;
    list-style: none;
    width: 20px;
    height: 20px;
}
#mycolor ul>li:nth-child(1){
    background-color: violet;
}
#mycolor ul>li:nth-child(2){
    background-color: skyblue;
}
#mycolor ul>li:nth-child(3){
    background-color: silver;
}
/*******************导航栏*******************/
/*******************一级菜单*******************/
.nav{
    width: 100%;
}
.nav_p{
    width: 100%;
    padding: 0;
}
.nav .nav_p li{
    width: 10%;
    height: 40px;
    line-height: 30px;
    display: inline;
    font-size: 28px;
    padding: 3px;
    background-image: linear-gradient(palegreen ,white );
    background-position: -100px -100px;
    transition: all 2s;
    position: relative;
    cursor:pointer;
    border-radius: 10px;
    margin: 15px;
}
.nav .nav_p li:hover{
    background-image:linear-gradient(white 80%,skyblue 100%);
    background-position: 0px 0px;
}
.nav a{
    color: seagreen;
    font-weight: bold;
    text-decoration: none;
}
.nav a:hover{
    color: red;
}
/*******************二级导航*******************/
.nav_p .nav_list{
    margin-left: -40px;
    position: absolute;
    left: 0;
    display: none;
    width: 100%;
    border-radius: 5px;
}
.nav_list li a{
    font-size: 14px;
}
.nav_p>li.sub:hover ul{
    display: block;
}
.nav_list>li>a{
    display: inline-block;
    line-height: 41px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    color: green;
    background:skyblue;
    border:1px solid rgb(243,243,243);
}
#mycolor{
    width: 50px;
    position: absolute;
    top: 5px;
}
#mycolor ul{
    float: right;
    margin-right: -1100px;
}
#mycolor ul>li{
    list-style: none;
    width: 20px;
    height: 20px;
}
#mycolor ul>li:nth-child(1){
    background-color: violet;
}
#mycolor ul>li:nth-child(2){
    background-color: skyblue;
}
#mycolor ul>li:nth-child(3){
    background-color: silver;
}

/************main************/
/******************图片轮播******************/
.one {
    border-radius: 3px;
    /*margin-left: 20px;*/
    width: 380px;
    height: 300px;
    animation-name: move;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
}
main{
    padding-top: 10px;
    margin: 5px;
}
/******************headline******************/

.headline ul {
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
    border-radius: 3px;
    height: 300px;
}
.headline ul li {
    padding-top: 20px;
    width: 100%;
    overflow: hidden;
    height: 140px;
    padding-right: 25px;
    border-radius: 3px;
    position: relative;
}
.headline ul li a {
    overflow: hidden;
    height: 100%;
}
.headline ul li img {
    width: 100%;
    height: 100%;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    transition: all 0.5s; opacity: 0.7;
}
.headline ul li:hover img {
    transform: scale(1.1);
    opacity: 1;
}
.headline ul li span {
    bottom: 0;
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    color: #FFF;
    text-align: center;
    font-size: 15px;
    margin-top: 5px;
    padding: 0 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 24px;
    height:48px;
}
/************我的名片************/
.rbox {
    opacity: 0.3;
    margin-right: 20px;
    overflow: hidden;
}
.pic{
    border-radius: 50%;
    width:10%;
    height:10%;
    float: right;
margin-left: 100px;
}
.pic:hover{
    transform:scale(1.2);
}
.card {
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
    border-radius: 3px;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px
}
.card h2 {
    /*margin-top: -70px;*/
    font-size: 22px;
    /*margin: 10px;*/
    color: #000;
    font-weight: normal;
    padding-bottom: 50px;
    margin-left: 20px;
}
.card p {
    /*margin-left: 15px;*/
    /*margin-top: -50px;*/
    font-size: 12px;
    padding: 0 0 0 10px;
    line-height: 5px;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
    color: #000;
    -webkit-animation: animations2 5s ease-in-out 5s;
    -moz-animation: animations2 5s ease-in-out 5s;
    -o-animation: animations2 5s ease-in-out 5s;
    -ms-animation: animations2 5s ease-in-out 5s;
    animation: animations2 5s ease-in-out 5s;
}
/******************图标内容******************/
.linkmore {
    /*padding-top: 110px;*/
    margin: 5px;
    margin-left: -20px;

}
.linkmore li {
    list-style: none;
    width: 25%;
    float: left;
}
.linkmore li a {
    height: 53px;
    display: block;
    overflow: hidden;
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
    border-radius: 50%;
    margin: 0 5px;
}
.linkmore li a:hover {
    opacity: 0.3;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 30px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    line-height: 53px;
    -moz-osx-font-smoothing: grayscale;
}
.icon-youxiang:before { content: "\e640";}
.icon-weixin:before { content: "\e501"; }
.icon-QQ:before { content: "\e607"; }
.icon-home:before { content: "\e64b"; }
a.iconfont.icon-zhuye { color: #ef5509; font-size: 36px; }
a.iconfont.icon-youxiang { color: #FF991A; font-size: 28px; }
a.iconfont.icon--- { color: #1296DB; }
a.iconfont.icon-weixin { color: #07AF12; }
#weixin { position: relative }
#weixin i { display: block; position: absolute; bottom: 55px; right: 0 }
#weixin i img { height: 100px; display: none }
#weixin:hover i img { display: block }
/*!******************tab_box*!******************/
.row .tab_box{
   margin: 15px;
}
.whitebg {  border-radius: 3px;  overflow: hidden;}
.tab_box { clear: both; position: relative;
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
}
.newslist {
    width: 100%;
    padding-top: 10px;
}
.newslist li { overflow: hidden; line-height: 40px; padding-left: -50px;}
.newslist li a {  }
.newslist li img { width: 100% }
.newslist li { height: 40px;margin-left: -40px }
.newslist li:hover { height: 100%; background: #f7f7f7 }
.newslist li:hover a { color: #000; font-weight: bold }
.newslist li:hover i { background: #222; }
.newslist li:nth-child(1) { height: 100%; background: #f7f7f7 }
.newslist li:nth-child(1) a { color: #000; font-weight: bold }
.newslist:hover li:nth-child(1) { height: 22px; background: none; }
.newslist:hover li:nth-child(1) a { color: #333; font-weight: normal }
.newslist:hover li:nth-child(1):hover { height: 100%; background: #f7f7f7; }
.newslist:hover li:nth-child(1):hover a { color: #000; font-weight: bold }
.newslist p { line-height: 24px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-ine-clamp: 2; height: 48px; }
/***********************************学习网站*/
.study li{
    border-radius: 3px;
    list-style-type: none;
    transition: all 0.5s;
}
.study li:hover{
    margin-bottom: 10px;
    color: red;
}
.study{
    opacity: 0.6;
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
    background-color: var(--bgstudy);
}
/*页脚*/
footer{
    clear: both;
    background: #999999;
    color: black;
    text-align: center;
    width: 100%;
    height: 20px;
    margin-top: 30px;
}

/*animate动画*/
.card h2{
    width: 200px;
    animation:animations2 1.5s ease infinite ;
}
@keyframes animations2 {
    25%{transform:translateY(20px)}
    50%{transform:translateX(20px)}
    75%{transform:translateY(0px)}
    100%{transform:translateX(0px)}
}

.tab_box h3{
    width: 200px;
    animation:animations3 1.5s ease infinite ;
}
@keyframes animations3 {
    50%{transform:translateY(20px)}
    100%{transform:translateY(0px)}
}
